<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>宠物图鉴</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; }
        .container { max-width: 1000px; margin: 0 auto; padding: 20px; }
        .header { background-color: #3498db; color: white; text-align: center; padding: 20px; }
        .nav { background-color: #2980b9; overflow: hidden; }
        .nav a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }
        .nav a:hover { background-color: #1abc9c; }
        .footer { background-color: #34495e; color: white; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; }
        
        .card { background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 20px 0; padding: 20px; }
        .card h2 { color: #3498db; margin-top: 0; }
        .card-item { padding: 10px; margin: 10px 0; }
        .card-item a { color: #2980b9; text-decoration: none; font-weight: bold; }
        .card-item a:hover { text-decoration: underline; }
        
        .columns { display: flex; flex-wrap: wrap; gap: 20px; }
        .column { flex: 1; min-width: 280px; }
        
        table { width: 100%; border-collapse: collapse; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; color: #2980b9; }
        img { width: 100px; height: 100px; object-fit: cover; border-radius: 4px; }
        .filter { margin-bottom: 20px; }
        .pagination { margin-top: 20px; text-align: center; }
        .pagination a { display: inline-block; padding: 8px 16px; margin: 0 4px; background-color: white; border-radius: 4px; text-decoration: none; color: #2980b9; }
        .pagination a:hover, .pagination a.active { background-color: #2980b9; color: white; }
        
        .btn-detail {display: inline-block;padding: 6px 12px;background-color: #3498db;color: white !important;
            border-radius: 4px;text-decoration: none !important; margin: 2px;}
        .btn-delete { display: inline-block;padding: 6px 12px;background-color: #e74c3c;
            color: white !important; border-radius: 4px;text-decoration: none !important;margin: 2px;}
        .btn-detail:hover, .btn-delete:hover {opacity: 0.85;}
    </style>
</head>
<body>
    <div class="header">
        <h1>宠物图鉴</h1>
    </div>
    
    <div class="nav">
        <a href="petList">图鉴</a>
        <a href="home">攻略</a>
        <a href="myInfo">我的</a>
    </div>
    
    <div class="container">
        
        <!-- 搜索和筛选 -->
        <div class="card">
            <h2>筛选条件</h2>
            <form action="petList" method="get">
                <input type="text" name="keyword" placeholder="输入宠物名或编号搜索" 
                       style="padding: 8px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px;"
                       value="${keyword}">
                <select name="attribute" 
                        style="padding: 8px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px;">
                    <option value="">全部属性</option>
                    <option value="火" ${attribute == '火' ? 'selected' : ''}>火</option>
                    <option value="水" ${attribute == '水' ? 'selected' : ''}>水</option>
                    <option value="草" ${attribute == '草' ? 'selected' : ''}>草</option>
                    <option value="电" ${attribute == '电' ? 'selected' : ''}>电</option>
                    <option value="冰" ${attribute == '冰' ? 'selected' : ''}>冰</option>
                    <option value="普通" ${attribute == '普通' ? 'selected' : ''}>普通</option>
                </select>
                <select name="sortField" 
                        style="padding: 8px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px;">
                    <option value="" ${empty sortField ? 'selected' : ''}>不排序</option>
                    <option value="energy" ${sortField == 'energy' ? 'selected' : ''}>精力</option>
                    <option value="attack" ${sortField == 'attack' ? 'selected' : ''}>攻击</option>
                    <option value="magicAttack" ${sortField == 'magicAttack' ? 'selected' : ''}>魔攻</option>
                    <option value="defense" ${sortField == 'defense' ? 'selected' : ''}>防御</option>
                    <option value="magicDefense" ${sortField == 'magicDefense' ? 'selected' : ''}>魔防</option>
                    <option value="speed" ${sortField == 'speed' ? 'selected' : ''}>速度</option>
                </select>
                <select name="sortOrder" 
                        style="padding: 8px; margin-right: 10px; border: 1px solid #ddd; border-radius: 4px;">
                    <option value="asc" ${sortOrder == 'asc' ? 'selected' : ''}>升序</option>
                    <option value="desc" ${sortOrder == 'desc' ? 'selected' : ''}>降序</option>
                </select>
                <input type="submit" value="筛选" 
                       style="padding: 8px 16px; background-color: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;">
                <c:if test="${sessionScope.user != null}">
                <a href="addPetPage" 
                   style="padding: 8px 16px; background-color: #1abc9c; color: white; text-decoration: none; border-radius: 4px; margin-left: 10px;">
                    添加宠物
                </a></c:if>
                <c:if test="${sessionScope.user == null}">
    <a href="#" onclick="alert('请先登录再添加宠物！'); return false;" class="btn" 
     style="padding: 8px 16px; background-color: #1abc9c; color: white; text-decoration: none; border-radius: 4px; margin-left: 10px;">
     添加宠物</a>
</c:if>
            </form>
        </div>
        
        <!-- 宠物列表 -->
        <div class="card">
            <h2>宠物列表</h2>
            <table>
                <tr>
                    <th>编号</th>
                    <th>图片</th>
                    <th>名称</th>
                    <th>属性</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${pets}" var="pet">
                    <tr>
                        <td>${pet.number}</td>
                        <td><img src="${pageContext.request.contextPath}${pet.image}" alt="${pet.name}" /></td>
                        <td>${pet.name}</td>
                        <td>${pet.attribute}</td>
                        <td>
                            <a href="petDetail?number=${pet.number}" class="btn-detail">查看详情</a>
                             <c:if test="${sessionScope.user != null}">
                            <a href="deletePet?number=${pet.number}" onclick="return confirm('确定要删除该宠物吗？')" class="btn-delete">删除</a>
                            </c:if>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
        
        <div class="pagination">
            <a href="#">上一页</a>
            <a href="#" class="active">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">下一页</a>
        </div>
    </div>
</body>
</html>